<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="test"></div>
<div id="test1"></div>
<body>
    <script>
        // 思路：在页面完成加载的时候执行该函数
        // 因为当前实例已经将函数体挂载到window 全局上
        // 然后当通过indexOf 查找到当前函数体时 也就是说函数名特定标志的字符串的时候
        // 执行下一步  删除首个获得当前特定开头的几个函数名构成的数组 然后通过apply的方法来立即执行函数
        // 下一步销毁函数 然后在进行递归来判断是否有下一个操作。
        var hook = (function () {
            return {
                timer: null,
                init: function () {
                    this.callHooks('init');
                },
                callHooks: function (init) {
                    var s = "hook_" + init + '_event',
                        f = [];
                        // console.log(s,'我是名称');
                        // console.log(window ,'系统');
                        // console.log(1);
                    for (var h in window) {
                        // console.log(h);
                        // console.log(h.indexOf(s));
                        if (h.indexOf(s) != 0) continue;
                        
                        f.push(h);
                    }
                    console.log(f,'数组');
                    this.hooksTimeout(f);
                   
                },
                hooksTimeout: function (hooks) {
                    // console.log(2);
                    // 当调用的长度为0的时候
                    if (0 === hooks.length) {
                        if (this.timer) clearTimeout(this.timer);
                        return;
                    }
                    // 删除当前传递来的参数 shift 返回值为返回删除的数组项
                    var h = hooks.shift();
                    console.log(h,'h');
                    // 执行当前方法然后销毁
                    window[h].apply();
                    console.log(window[h],'方法');
                    window[h] = undefined;
                    // 再次执行当前方法 知道没有为止
                    window.setTimeout(function () { hook.hooksTimeout(hooks); }, 200);
                }
            }
        }());

        // 钩子1
        var hook_init_event_tpl_html = function () {
            document.getElementById('test').innerHTML = 'This is HTML!';
        }

        var hook_init_event_scrollbars = function () {
            document.getElementById('test1').innerHTML = 'This is HTML1!';
        }
        // 钩子2
        var hook_init_event_tpl_console = function () {
            console.log('This is console!');
        }

        // 最好在页面加载完之前调用，也就是在window.onload()之前
        hook.init();
    </script>
</body>

</html>